<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${wbeParameter.name}">注册</title>
    <link rel="shortcut icon" href="" type="image/x-icon">
    <link rel="stylesheet" charset="utf-8" href="/resource/js/front/reset.css">
    <link rel="stylesheet" charset="utf-8" href="/resource/js/front/web_pop.css">
    <link rel="stylesheet" charset="UTF-8" href="/resource/js/front/login.css">
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
</head>
<style>
    .layui-form-select .layui-edge {
        right: 43px;
    }
</style>
<body>
<div class="register_header">
    <div class="header_center clearfix">
        <div class="myfl">
            <span>用户注册</span>
        </div>
        <div class="myfr">
            <a href="index.html">返回首页</a>
        </div>
    </div>
</div>
<div class="register_content clearfix"
     th:style="${'background:url( '+wbeParameter.backgroundImg+') no-repeat 0 138px'}">
    <input type="hidden" value="" id="iserror">
    <div id="my_from" method="post" class="layui-form">
        <div class="register_box myfr">
            <div class="title clearfix">
                <p class="tabchange clearfix">
                <h2 class="myfl_del sign_select" id="usertype">用户注册</h2>
                <input type="hidden" value="1" name="memberType" id="registeruser_type">
                </p>
            </div>
            <input type="text" placeholder="请输入您的用户名" name="userName" class="layui-input" lay-verify="required|userName"
                   value=""/>
            <input type="text" placeholder="请输入您的密码" name="plainPassword" class="layui-input"
                   lay-verify="required|pass" value=""/>
            <input type="text" placeholder="请输入您的手机号" name="iphone" class="layui-input" lay-verify="required|phone"
                   value=""/>
            <input type="text" placeholder="请输入您的邮件" name="email" class="layui-input" lay-verify="required|email"
                   value=""/>
            <input type="text" placeholder="请输入您的真实姓名" name="realName" class="layui-input" lay-verify="required"
                   value=""/>
            <input type="text" placeholder="请输入您的地址" name="address" class="layui-input" value=""/>
            <!--            <select name="sex" class="source" style="-webkit-appearance: none;appearance: none;color: #666;">-->
            <!--                <option value="男">男</option>-->
            <!--                <option value="女">女</option>-->
            <!--            </select>-->
            <span>性别：</span>
            <input type="radio" name="sex" value="男" title="男" checked>
            <input type="radio" name="sex" value="女" title="女">
            <input type="text" id="imgSrc" class="layui-input" readonly lay-verify="required" placeholder="头像"
                   minlength="2">
            <input hidden name="imgUrl" id="imgUrl">
            <!-- <div class="clearfix message_code_box">
                 <input type="text" class="message_code myfl" name="validCode" maxlength="6" placeholder="请输入短信验证码"
                        value=""/>
                 <a href="javascript:;" class="message_code_btn myfr">发送验证码</a>
                 <span class="message_code_again"><em>60</em>秒重发</span></div>-->
            <a href="javascript:;" class="submit_btn" lay-submit="" lay-filter="demo1">注册</a>
            <br>
            <a href="login.html" style="color: #3e94ed">已有账户？立即登录</a>
            <!--短信的token-->
            <!--<input type="hidden" name="token" value="47016a045c820bc2857e84547b11a380" id="tonkenNum">-->
        </div>
    </div>
</div>
<!--错误提示-->
<div class="normal_pop pop_password" id="pop_load">
    <h3>提示</h3>
    <p class="error" style="font-size: 20px;line-height: 24px;margin: 40px 0 36px;color: #666;">注册失败，请稍后再试</p>
    <i id="true_btn" class="layui-layer-close">确定</i>
</div>
<script src="/resource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- Layui Js -->
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>

<script>
    layui.use(['carousel', 'upload', 'form'], function () {
        var carousel = layui.carousel
            , upload = layui.upload
            , form = layui.form;
        //普通图片上传
        upload.render({
            elem: '#imgSrc'
            , url: '/upload.do'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#imgUrl").val(res.obje);
                $("#imgSrc").val(res.obje);
                return layer.msg('上传成功');
            }
            , error: function () {
                return layer.msg('上传失败');
            }
        });
        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 5) {
                    return '账号至少得5个字符';
                }
            }
            , pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            $.ajax({
                url: '/user/userRegister.do',
                type: 'post',
                dataType: 'json',
                data: data.field,
                async: false,
                success: function (result) {
                    console.log(result)
                    if (result.status) {
                        alert("注册成功！")
                        location.href = "/loginShiro";
                    } else {
                        layer.msg(result.msg, {time: 2000});
                    }
                }

            });
        });
    });

</script>
</body>
</html>
